<template>
  <div class="file__item">
    <!-- 底层展示图片或文件类型图标 -->
    <div class="file__item-back">
      <template v-if="fileInfo.type === 'image' && file.url">
        <el-image
          class="img"
          ref="imageRef"
          preview-teleported
          fit="cover"
          :src="file.url"
          :preview-src-list="[file.url]" />
        <!--<img class="img" :src="file.url" alt="" v-if="fileInfo.type === 'image' && file.url"/>-->
      </template>

      <img class="icon" :src="fileIcon" alt="" v-else />
    </div>

    <!-- 上传进度 -->
    <div class="file__item-uploading" v-if="file.status === 'uploading'">
      <div class="file-name">{{ file.name }}</div>
      <el-progress
        text-color="#000"
        color="#409eff"
        :type="progressType"
        :percentage="Math.round(parseFloat(file.percentage) * 10) / 10"
        :width="size === 'small' ? 100 : 126" />
    </div>
    <div class="file__item-name" v-else>
      <div class="file-name">{{ file.name }}</div>
    </div>

    <!-- 结果状态 -->
    <div class="file__item-status">
      <label class="file__item-status-label" v-if="file.status === 'success'">
        <el-icon class="icon"><Check class="el-icon-check" /></el-icon>
      </label>
      <label class="file__item-status-label fail" v-if="file.status === 'fail'">
        <el-icon class="icon"><Plus /></el-icon>
      </label>
    </div>

    <!-- 可操作按钮 -->
    <div class="file__item-actions" :title="file.name">
      <span @click="handlePreview" v-if="canPreview">
        <el-icon title="预览"><ZoomIn /></el-icon
      ></span>
      <span @click="handleDownload" v-if="canDownload">
        <el-icon title="下载"><Download /></el-icon
      ></span>
      <span @click="handleRemove" v-if="canRemove">
        <el-icon title="删除"><Delete /></el-icon
      ></span>
    </div>
  </div>
</template>
<script setup name="FileItem">
  import { saveAs } from 'file-saver'
  import { getFileInfo } from '@/utils/tools/url'

  const props = defineProps({
    file: {
      type: Object,
      default: function () {
        return {}
      }
    },
    disabled: Boolean,
    disabledDownLoad: Boolean, // 禁用状态是否显示下载
    size: String,
    progressType: String //进度条类型
  })

  const { proxy } = getCurrentInstance()
  const fileInfo = computed(() => getFileInfo(props.file.name))

  const fileIcon = computed(() => fileInfo.value.icon)
  const canPreview = computed(() => {
    const previewList = ['image', 'txt', 'pdf', 'video', 'audio']
    return previewList.includes(fileInfo.value.type) && props.file.status === 'success'
  })
  const canDownload = computed(() => {
    return props.file.status === 'success' && (!props.disabled || (props.disabled && props.disabledDownLoad))
  })
  const canRemove = computed(() => {
    return !props.disabled
  })

  // 预览
  function handlePreview() {
    const type = fileInfo.value.type
    if (type === 'image' && proxy.$refs.imageRef) {
      proxy.$refs.imageRef.showPreview()
    } else if (['image', 'pdf', 'txt', 'video', 'audio'].includes(type)) {
      window.open(props.file.url)
    }
  }

  // 下载
  function handleDownload() {
    saveAs(props.file.url, props.file.name)
  }

  // 删除
  const emit = defineEmits(['remove'])
  function handleRemove() {
    emit('remove', props.file)
  }
</script>

<style lang="scss" scoped>
  .full {
    width: 100%;
    height: 100%;
  }
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .absolute {
    position: absolute;
    top: 0;
    left: 0;
    @extend .full;
  }
  .file__item {
    @extend .full;
    border: 1px solid #c0ccda;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    .file-name {
      font-size: 12px;
      line-height: 15px;
      color: #333;
      max-height: 60px;
      overflow: hidden;
      display: none;
    }
    &-back {
      @extend .full;
      @extend .flex-center;
      z-index: 1;
      padding: 2px;
      .img {
        @extend .full;
        object-fit: contain;
        img {
          object-fit: contain;
        }
      }
      .icon {
        width: 60%;
        object-fit: contain;
      }
    }
    &-status {
      @extend .absolute;
      z-index: 5;
      &-label {
        position: absolute;
        line-height: 24px;
        right: -15px;
        top: -6px;
        width: 40px;
        height: 24px;
        background: #13ce66;
        text-align: center;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
        &.fail {
          background: #ff0000;
        }
        .icon {
          font-size: 12px;
          margin-top: 10px;
          font-weight: 700;
          color: #fff;
          .el-icon-check {
            transform: rotate(-45deg);
          }
        }
      }
    }
    &-uploading {
      @extend .absolute;
      z-index: 10;
      background: rgba(255, 255, 255, 0.5);
      :deep(.el-progress--circle) {
        @extend .flex-center;
        height: 100%;
      }
    }
    &-actions {
      @extend .absolute;
      z-index: 20;
      padding: 0 10%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      span {
        display: none;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
      }
      &:hover {
        background: rgba(0, 0, 0, 0.5);
        span {
          display: inline-block;
        }
      }
    }
  }

  //text类型 左侧图片右侧名称
  .el-upload-list--text {
    .file__item {
      padding: 5px 10px 5px 5px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      &-back {
        width: 70px;
        height: 70px;
        border: 1px solid #eee;
        flex-shrink: 0;
        margin-right: 10px;
      }
      &-name {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: flex-start;
        .file-name {
          max-height: 45px;
          display: block;
        }
      }
      &-uploading {
        padding: 2px 0;
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        flex-direction: column;
        .file-name {
          display: block;
          max-height: 30px;
          margin-bottom: 2px;
        }
      }
      &-actions {
        justify-content: center;
        span {
          padding: 0 15px;
        }
      }
      :deep(.el-progress--line) {
        position: relative;
        top: 0;
        @extend .flex-center;
      }
      :deep(.el-progress--line .el-progress__text) {
        flex-shrink: 0;
        position: relative;
        top: 0;
        min-width: 40px;
        text-align: right;
        font-size: 12px !important;
      }
      :deep(.el-upload-list__item .el-progress--circle .el-progress__text) {
        top: 50%;
      }
    }
  }
</style>
